<template>
  <div class="text-over">
    <h3>文本溢出</h3>
    <div id="autoEllipsisWrapper" ref="container" v-bind="$attrs">
      <span ref="text">
        <slot />
      </span>
    </div>
    <div v-for="i in 9" :key="i*2" class="aaa">
      <input type="text" v-for="item in 9" :key="item*0.1" style="width: 30px">
    </div>
  </div>
</template>

<script setup>
  const container = ref();
  const text = ref();
  function autoElipsis(container, textNode) {
    const str = '这是一段文字';
    textNode.textContent = str;
    container.style.whiteSpace = 'nowrap';
    container.style.width = 'fit-content';
    const containerWidth = container.clientWidth;
    console.log(containerWidth);
    const parent = container.parentElement;
    const parentWidth = parent.clientWidth || parent.offsetWidth;
    console.log(parentWidth, 'parentWidth');
    if (containerWidth <= parentWidth) {
      textNode = str;
      return;
    } 
    // else if (containerWidth > parentWidth) {
    //   container.style.width = parentWidth + 'px';
    //   container.style.whiteSpace = 'nowrap';
    //   container.style.textOverflow = 'ellipsis';
    //   container.style.overflow = 'hidden';
    // } 
    // else {
    //   const textWidth = textNode.offsetWidth;
    // }
  }
  onMounted(async () => {
    autoElipsis(unref(container), unref(text));
  });
</script>